<template>
  <div class="box">
    <div class="header">
    
       <!-- 导航栏 -->
        <van-icon class="navLeft" name="arrow-left" size="25" @click="onClickLeft"/>
        <van-search class="navCenter" v-model="value" shape="round" background="aqua" placeholder="请输入搜索关键词" @click="onSeek"/>
        <van-icon class="navRight" name="scan" size="25"/>
    </div>
    <!-- 下拉选项 -->
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="团购">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 品牌图标 -->
    <div>
      <van-grid icon-size="35px">
        <van-grid-item
          :icon="item.img1"
          :text="item.brand"
          v-for="item in math"
          :key="item.proid"
          @click="isshow1=!isshow1"
        />
      </van-grid>
      <!-- 下划线 -->
      <van-divider />
    </div>
    <!-- 商品列表 -->
    <div v-if="isshow1">
      <ul :class="isshow2 ? 'prolist2' : 'prolist1'">
        <li
          class="van-hairline--bottom van-hairline--right"
          v-for="item in math"
          :key="item.proid"
          @click="todetail(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div>
            <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
            <p>￥{{ item.originprice }}</p>
          </div>
        </li>
        <div class="toCut" @click="isshow2 = !isshow2">
          <van-icon name="bars" v-if="isshow2" />
          <van-icon name="apps-o" v-else />
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem, Switch, Divider } from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Switch);
Vue.use(Divider);
export default {
  name: "ClassView",
  data() {
    return {
      value:'',
      value1: 0,
      value2: "a",
      option1: [
        { text: "综合", value: 0 },
        { text: "最新上架", value: 1 },
        { text: "价格最低", value: 2 },
        { text: "价格最高", value: 3 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      switch1: false,
      switch2: false,
      math: [],
      isshow1: false,
      isshow2: true,
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
     onClickLeft() {
      this.$router.push('/home')
    },
    onSeek() {
    this.$router.push('/search')
    },
    todetail(proid) {
       this.$router.push("/detail/"+proid)
    }
  },
  created() {
    this.math = this.$route.query.maths;
    console.log(this.math);
  },
};
</script>

<style scoped>
.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.prolist1 li {
  width: 48%;
}
.prolist1 li img {
  width: 100%;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 40%;
}
.toCut {
  width: .3rem;
  height: .3rem;
  text-align: center;
  line-height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: .7rem;
  right: .2rem;
}
</style>